<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>

</head>
<body>
<div id="app" v-on:click="display">
    {{ message }}
    <input style="width: 500px" v-model="message" v-bind:disabled="isDisabled">
    <input style="width: 500px" v-model="message" v-once>

    <p>render as html</p>

    <span>{{h}}</span>
    <span v-html="h"></span>

    <p>Computed</p>
    <span>{{computed}}</span>
</div>
<hr/>

<div id="app-2">
  <span v-bind:title="message" v-if="seen">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

    <span v-on:click="sur_bind_fun">后绑定{{a}}</span>
    <span>后绑定 $set {{n.sur_bind_set}}</span>
    <ul>
        <li v-for="(f , index) in fruits" :key="f.id">
            {{index}} {{f.c}} <-> {{f.e}}
        </li>
    </ul>

    <test-component v-bind:todo="message"></test-component>
    <ul>
        <test-component-for v-for="f in fruits" v-bind:key="f.id" v-bind:todo="f.c"></test-component-for>
    </ul>
</div>
<hr/>

<test-component></test-component>
</body>
<script type="application/javascript">

    Vue.prototype.$startTime = new Date();
    Vue.prototype.$author = function(){
        return 'zyh';
    }

    Vue.component(
        'test-component', {template:'<p>{{todo}}</p>',props: ['todo']}
    );
    Vue.component(
        'test-component-for', {template:'<li>{{todo}}</li>',props: ['todo']}
    );

    var app_data = {
        message: 'Hello Vue!',
        m:'',
        h:'<h1>html</h1>',
        isDisabled:true
    };

    //将data改为只读。
    // Object.freeze(app_data);

    var app = new Vue({
        el: '#app',
        data: app_data,
        methods:{
            display : function(){
                this.message += ' Again ! ';
                this.m += ' Again ! ';
                this.isDisabled = !this.isDisabled;
            }
        },
        computed:{
            //可以有get/set , 参考 https://v2.cn.vuejs.org/v2/guide/computed.html
            computed : function(){
                return this.$startTime + this.$author() + ' length of message : ' + this.message.length;
            }
        },
        watch:{
            t : function (n , o){
                console.log('message changed : ');
                console.log(o);
                console.log(n);
            }
        },
        created: function () {
            console.log(this.watch);
        },
        beforeCreate: function () {
           this.$options.watch.message = this.$options.watch.t;
           this.$options.watch.m = this.$options.watch.t;
        },
    });

    var app2_data = {
        message: '页面加载于 ' + new Date().toLocaleString(),
        seen:true,
        fruits:[{'id':1,'c':'苹果','e':'apple'},{'id':2,'c':'香蕉'}],
        n:{}
    };
    var app2 = new Vue({
        el: '#app-2',
        data: app2_data,
        methods:{
            sur_bind_fun : function(){
                app2.a = 'a';

                let s = Math.ceil(Math.random()*10000000);
                app2.fruits[1].e = 'banana';
                this.flushData();
                console.log('sur_bind_fun called');
            },

            flushData : function(){
                let s = Math.ceil(Math.random()*10000000);
                Vue.set(app2_data.n,s , s);
            }
        },
        created: function () {
            this.message = "created " + this.message;
            console.log('a is: ' + this.message)
        }
    });
</script>
</html>
